<template>
  <view class="app-update">
    <view class="content-wrap">
      <view class="top-image-wrap"><image class="top-image" src="./image/top.png" mode="scaleToFill"></image></view>
      <view class="update-content-wrap">
        <view class="title-wrap">
          <text class="update-title">{{ updateInfo.updateTitle }}</text>
          <text class="update-version">v{{ updateInfo.versionOut }}</text>
        </view>
        <view class="text-wrap">
          <text class="update-text">{{ updateInfo.updateContent }}</text>
        </view>
      </view>
      <view v-if="downloading" class="progress-wrap">
        <view class="progress-bar">
          <text class="progress" :style="{ width: downloadProgress + '%' }">{{ downloadProgress }}%</text>
        </view>
      </view>
      <view class="update-button-wrap">
        <view class="wave-animation">
          <view class="wave"></view>
          <view class="wave"></view>
          <view class="wave"></view>
        </view>
        <view class="update-button" @click="handleUpdate">立即更新</view>
      </view>
      <view v-if="showForcedUpdate" class="close-button" @click="handleCloseUpdate">Ⅹ</view>
    </view>
  </view>
</template>

<script>
import Update from "@/utils/update.js"
export default {
  data() {
    return {
      update: null, // 更新类实例
      updateInfo: {}
    }
  },
  onLoad(option) {
    this.handleInit(option)
  },
  computed: {
    showForcedUpdate() {
      return !this.update?.updateInfo?.forcedUpdate == 1
    },
    downloadProgress() {
      return this.update?.downloadProgress
    },
    downloading() {
      return this.update?.downloading
    }
  },
  watch: {
    update: {
      handler(val) {
        if (val?.updateInfo) {
          this.updateInfo = val.updateInfo
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 初始化
    handleInit(option) {
      // 实例化更新类
      this.update = new Update({ isInit: true })
    },
    // 立即更新
    handleUpdate() {
      this.update && this.update.manualUpdate()
    },
    // 关闭更新
    handleCloseUpdate() {
      this.update && this.update.closeUpdate()
    }
  },
  onBackPress() {
    if (this.update?.updateInfo?.forcedUpdate == 1) return true
  }
}
</script>

<style scoped lang="scss">
.app-update {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.65);
  .content-wrap {
    width: 520rpx;
    position: relative;
    padding-top: 260rpx;
    border-radius: 20rpx;
    background-color: #fff;
    .top-image-wrap {
      top: -40rpx;
      left: 0;
      right: 0;
      width: 100%;
      height: 300rpx;
      position: absolute;
      .top-image {
        width: 100%;
        height: 300rpx;
      }
    }
    .update-content-wrap {
      display: flex;
      padding-bottom: 30rpx;
      flex-direction: column;
      .title-wrap {
        display: flex;
        padding: 10rpx 32rpx;
        align-items: flex-end;
        justify-content: space-between;
        .update-title {
          font-size: 32rpx;
          font-weight: bold;
          margin-right: 30rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        .update-version {
          font-weight: bold;
          flex-shrink: 0;
        }
      }
      .text-wrap {
        padding: 20rpx 0;
        max-height: 280rpx;
        overflow-y: scroll;
        padding-left: 32rpx;
        .update-text {
          font-size: 28rpx;
        }
      }
    }
    .progress-wrap {
      padding: 0 20rpx;
      .progress-bar {
        width: 100%;
        height: 40rpx;
        overflow: hidden;
        border-radius: 20rpx;
        background-color: #e6e6e6;
        .progress {
          width: 0;
          color: #fff;
          height: 40rpx;
          display: flex;
          font-size: 24rpx;
          font-weight: bold;
          align-items: center;
          border-radius: 20rpx;
          justify-content: center;
          background-color: #4d85fd;
          transition: width 0.1s ease;
        }
      }
    }
    .update-button-wrap {
      height: 200rpx;
      position: relative;
      border-radius: 20rpx;
      background-color: #6cc7e6;
      .update-button {
        top: 50%;
        left: 50%;
        width: 300rpx;
        height: 80rpx;
        color: #ffffff;
        display: flex;
        z-index: 99;
        font-weight: bold;
        position: absolute;
        align-items: center;
        border-radius: 8rpx;
        justify-content: center;
        background-color: #4d86fd;
        transform: translate(-50%, -20%);
      }
      .wave-animation {
        top: 0;
        left: 0;
        z-index: 9;
        width: 520rpx;
        height: 180rpx;
        overflow: hidden;
        position: absolute;
        background-color: #fff;
        .wave {
          top: 50rpx;
          left: -250rpx;
          width: 1000rpx;
          height: 1000rpx;
          position: absolute;
          border-radius: 90%;
          filter: opacity(0.4);
          background: deepskyblue;
          transform-origin: 50% 48%;
          animation: drift linear infinite;
        }
        .wave:nth-of-type(1) {
          animation-duration: 5s;
        }
        .wave:nth-of-type(2) {
          animation-duration: 7s;
        }
        .wave:nth-of-type(3) {
          animation-duration: 9s;
          background-color: orangered;
          filter: opacity(0.1);
        }
        @keyframes drift {
          from {
            transform: rotate(360deg);
          }
        }
      }
    }
    .close-button {
      left: 50%;
      width: 70rpx;
      height: 70rpx;
      bottom: -100rpx;
      display: flex;
      font-weight: bold;
      position: absolute;
      border-radius: 100%;
      align-items: center;
      background-color: #fff;
      justify-content: center;
      transform: translateX(-50%);
    }
  }
}
</style>
